<template>
    <div id="Log">
        <filters
            block
            :form="searchForm"
            :filterData="filterData"
            @confirm="changePage(1)"
        />
        <div class="container">
            <DataTable
                rowKey="id"
                :tableData="Data"
                :tableColumn="tableColumn"
                :pageConfig="pageConfig"
                @refresh="getList"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class Log extends Vue {
    searchForm: any = {
        word: '',
        date: [],
        module_name: undefined
    }
    filterData: any = {
        module_name: {
            label: '模块',
            type: 'select',
            template: {
                placeholder: '请选择模块',
                clearable: true,
                filterable: true,
                options: [
                    {
                        label: '数据看板',
                        value: '数据看板'
                    },
                    {
                        label: '客户管理',
                        value: '客户管理'
                    },
                    {
                        label: '订单',
                        value: '订单'
                    },
                    {
                        label: '资源库',
                        value: '资源库'
                    },
                    {
                        label: '服务管理',
                        value: '服务管理'
                    },
                    {
                        label: '行业',
                        value: '行业'
                    },
                    {
                        label: '系统管理',
                        value: '系统管理'
                    }
                ]
            }
        },
        date: {
            label: '记录时间',
            type: 'daterange',
            template: {
                clearable: true
            }
        },
        word: {
            label: '账号',
            type: 'input',
            template: {
                placeholder: '请输入账号'
            }
        }
    }
    Data: any[] = []
    tableColumn: any = {
        module_name: {
            label: '所在模块',
            minWidth: 100
        },
        type: {
            label: '操作类型',
            minWidth: 150
        },
        login_time: {
            label: '记录时间',
            minWidth: 180
        },
        user_name: {
            label: '登录账号',
            minWidth: 140
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    }

    init () {
        this.getList()
    }
    getList () {
        let { word, date, module_name: moduleName } = this.searchForm
        let [ startTime, endTime ] = this.$util.formatDate(date)
        let data = {
            word,
            moduleName,
            startTime,
            endTime,
            page: this.pageConfig.current,
            size: this.pageConfig.pageSize
        }
        this.$api.homeLogListFetch(data).then((res: any) => {
            this.Data = res.data.records
            this.pageConfig.total = res.data.total
            if (!this.Data.length && this.pageConfig.current > 1) {
                --this.pageConfig.current
                this.getList()
            }
        })
    }
    changePage (val: number) {
        this.pageConfig.current = val
        this.getList()
    }
}
</script>

<style lang="scss">

</style>
